<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <link rel="stylesheet" href="./bases.css" >
    <link rel="stylesheet" href="./index.css" >
    <script src="./jquery3.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            display: inline-block;
        }
        .floorContent{
            width: 15rem;
            margin: 0 auto;
        }
        .top{
            width: 15rem;
            height: 2rem;
            background-color: #333;
            color: #fff;
            font-size: .6rem;
            position: relative;
            z-index: 9;
        }
        .top-left{
            width: 2rem;
            height: 2rem;
        }
        .top a{
            color: #fff;
            font-size: .6rem;
        }
        .top-left>img{
            width: .6rem;
            height: .6rem;
            margin: .7rem;
        }
        .float{
            float: left;
        }
        .top-center img{
            width: 1.4rem;
            height: 1.4rem;
            margin: .4rem .4rem 0.2rem 0rem;
        }
        .top-center > a{
            margin-left: .2rem;
            font-size: .55rem;
        }
        .top-right{
            width: 3rem;
            height: 2rem;
            background-color: red;
            float: right;
            text-align: center;
        }
        .top-right{
            width: 3.4rem;
            height: 2rem;
            background-color: red;
            float: right;
            text-align: center;
            line-height: 2rem;
        }
        .head{
            background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
            position: relative;
            height: 5.25rem;
            width: 15rem;
            border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
        }
        .head-bg{
            width: 15rem;
            height: 2rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            background-color: #c82519;
            position: relative;
        }
        .fixed{
            position: fixed;
            top: 0rem;
            z-index: 9;
        }
        .head-left{
            width: 1rem;
            height: 1rem;
            margin: .5rem 0rem;
        }
        .head-center{
            width: 10rem;
            background-color: #fff;
            border-radius: .5rem;
            height: 1.2rem;
            margin-top: .4rem;
        }
        .head-img1{
            width: .8rem;
            height: .6rem;
            margin: .3rem 0 .2rem .4rem;
        }
        .head-img2{
            width: .8rem;
            height: .8rem;
            border-left: 1px solid #aaa;
        }
        .head-center>input{
            width: 7rem;
            height: 1rem;
            border: none;
            outline: none;
            margin: .1rem .2rem;
        }
        .head-right{
            width: 1.4rem;
            height: 2rem;
            font-size: .6rem;
            color: #fff;
            text-align: center;
            line-height: 2rem;
        }
        .head-slide{
            width: 14rem;
            height: 5rem;
            margin: 0 auto;
            border-radius: 10px;
            position: relative;
        }
        .slideShow>img{
            width: 14rem;
            height:5rem;
            border-radius: 10px; 
        }
        .head-slide >ul{
            width: 5rem;
            height: .6rem;
            position: absolute;
            bottom: 0;
            left: 5.5rem;
        }
        .head-slide >ul li{
            width: .3rem;
            height: .3rem;
            margin: .2rem;
            background-color: #333;
            display: inline-block;
            border-radius: 50%;
        }
        .current{
            background-color: #fff !important;
        }
        .nav{
            width: 15rem;
            margin-top: 2rem;
            height: 6rem;
            margin-bottom: 1rem;
        }
        .nav-list{
            width: 15rem;
            margin: 0 auto;
        }
        .nav-list>a{
            box-sizing: content-box;
            width: 2.87rem;
            height: 3rem;
            display: inline-block;
            text-align: center;
        }
        .nav-list span{
            margin-left: .5rem;
        }
        .nav-list>a img{
            width: 1.5rem;
            height: 1.5rem;
            margin: .75rem .75rem 0rem;
        }
        .seckill{
            width: 15rem;
            height: 8m;
            margin-bottom: .4rem;
        }
        .seckill-body{
            width: 14rem;
            height: 8rem;
            margin: 0 auto;
            border-radius: .7rem;
            background-color: #fff;
            overflow: hidden;
        }
        .seckill-top{
            width: 13rem;
            margin: 0 auto;
            height: 1.6rem;
            background-image: url(./img/seckill/seckill1.png);
            background-size: 100%;
            font-size: .6rem;
            line-height: 1.6rem;
            display: flex;
            justify-content: space-between;
        }
        .seckillleft {
            width: 8rem;
        }
        .seckillleft span{
            display: inline-block;
            width: 2rem;
            height: .8rem;
            line-height: .8rem;
            color: red;
            position: relative;
        }
        .seckillleft span::after{
            height: .6rem;
            width: .6rem;
            content: "";
            display: inline-block;
            vertical-align: middle;
            background-image: url(./img/seckill/seckill.png);
            background-position: 50%;
        }
        .seckillRight{
            width: 3.6rem;
            color: red;
            font-size: 0.5rem;
        }
        .seckillRight a{
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            border: .1rem solid red;
            display: inline-block;
            top: .1rem;
            margin-left: .2rem;
            position: relative;
            background: red;
        }
        .seckillRight a::after{
            content: '';
            width: .1rem;
            height: .1rem;
            border-style: solid;
            border-width: .1rem 0px 0px .1rem;
            border-color: #fff;
            position: absolute;
            top: .1rem;
            left: .1rem;
            transform: rotate(135deg);
        }
        .seckillTime{
            height: 1rem;
            line-height: 1rem;
            display: inline-block;
        }
        .seckillTime div{
            height: .8rem;
            background: red;
            color: #fff;
            display: inline;
            border-radius: .1rem;
        }
        .seckill-bottom{
            color: red;
            width: 30rem;
            display: flex;
            margin: 0 auto;
            height: 4.3rem;
        }
        .seckill-list{
            width: 4.2rem;
            margin: .2rem;
        }
        .seckill-list img{
            width: 4rem;
            height: 4rem;
        }
        .seckill-list span{
            margin-top: .3rem;
            font-size: .55rem;
            display: block;
            color: red;
            text-align: center;
        }
        .seckill-list span:last-child{
            color: rgb(113, 112, 112) !important;
            text-decoration: line-through;
            font-size: .5rem;
            margin-top: .1rem !important;
        }
        .floor{
            width: 15rem;
            height: 10rem;
        }
        .floor-body{
            width: 14rem;
            margin: 0 auto;
        }
        .floor-body a{
            width: 3.39rem;
            background-image: url(./img/floor-item/floor-item1.png);
            height: 5rem;
            background-size: 100%;
            background-repeat: no-repeat;
            position: relative;
        }
        .floor-body img{
            margin: 0.2rem .3em 0 .3rem;
            width: 2.8rem;
            height: 2.6rem;
        }
        .floor-body span{
            display: inline-block;
            text-align: center;
            width: 2.8rem;
            height: .8rem;
            margin: 0 .25rem;
            line-height: .6rem;
        }
        .floor-box{
            width: 2.8rem;
            font-size: .4rem;
            color: #fff;
            text-align: center;
        }
        .floors{
            width: 15rem;
            height: 13rem; 
        }
        .floors img{
            width: 3rem;
            height: 3rem; 
            margin:.2rem 0rem 0rem .275rem;
        }
        .floors a{ 
            display: block;
            font-size: .4rem;
            padding-left: .4rem;
            color: #cac0c0;
        }
        .floors-top{
            height: 6rem; 
            width: 14rem;
            margin: 0 auto;
            background: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        .floors-left{
            width: 7rem;
        }
        .floors-left a:first-child{
            padding-top: .2rem;
            font-size: .6rem;
            display: block;
            color: black;
        }
        .floors-bottom a:first-child{
            padding-top: .2rem;
            font-size: .6rem;
            display: block;
            color: black;
        }
        .floors-bottom{
            height: 6rem; 
            width: 14rem;
            margin: 0 auto;
            background: #fff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        .floors-right{
            width: 7rem;
            display: flex;
            justify-content: space-between;
        }
        .list{
            width: 15rem;
            height: 100%;
        }
        .list-body{
            width: 14rem;
            height: 100%;
            margin: 0 auto;
            display: flex;
        }
        .list-item{
            width: 7rem;
            height: 10rem;
            background: blueviolet;
        }
        .bottom{
            width: 15rem;
            height: 2.4rem;
            display: flex;
            justify-content: space-between;
            position: fixed;
            background: #fff;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="floorContent">
        <!-- 头部广告区 -->
        <div class="top">
            <div class="top-left float" href="#">
                <img src="./img/top/top-left.png">
            </div>
            <div class="top-center float">
                <img src="./img/top/top-left1.png">
                <a href="#">打开京东APP，购物更轻松</a>
            </div>
            <div class="top-right">立即打开
            </div>
        </div>
        <!-- 头部固定定位区域 -->
        <div class="head">
            <div class="head-bg">
                <img class="head-left" src="./img/head/head1.png"/>
                <div class="head-center">
                    <img class="head-img1" class="head-img" src="./img/head/head2.png">
                    <img class="head-img2" src="./img/head/sousuo.png"/>
                    <input placeholder="海尔空调" />
                </div>
                <div class="head-right">登陆</div>
            </div>
            <!-- 轮播图区域 -->
            <div class="head-slide">
                <div class="slideShow">
                    <img src="./img/head/slide1.jpg"/>
                </div>
                <ul>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!-- 小图标区域 -->
        <div class="nav"> 
            <div class="nav-list">
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide1.webp">
                    <span>京东超市</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide2.webp">
                    <span>数码电器</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide3.webp">
                    <span>京东服饰</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide4.webp">
                    <span>京东生鲜</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide5.webp">
                    <span>京东到家</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide6.webp">
                    <span>充值缴费</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide7.webp">
                    <span>9.9元拼</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide8.webp">
                    <span>领券</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide9.webp">
                    <span>领金贴</span>
                </a>
                <a class="nav-item" href="#">
                    <img src="./img/nav-list/slide10.webp">
                    <span>PLUS会员</span>
                </a>
            </div>
        </div>
        <!-- 秒杀区 -->
        <div class="seckill">
            <div class="seckill-body">
                <div class="seckill-top">
                    <div class="seckillleft">
                        <a href="#">京东秒杀</a>
                        <span>20</span>
                        <div class="seckillTime">
                            <div>11</div>:
                            <div>22</div>:
                            <div>33</div>
                        </div>
                    </div>
                    <div class="seckillRight">更多秒杀<a></a></div>
                </div>
                <div class="seckill-bottom">
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill2.png">
                        <span>¥23.4</span>
                        <span>¥30</span>
                    </a>
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill3.png">
                        <span>¥18.9</span>
                        <span>¥24.9</span>
                    </a>
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill4.png">
                        <span>¥219</span>
                        <span>¥329</span>
                    </a>
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill5.png">
                        <span>¥1699</span>
                        <span>¥2599</span>
                    </a>
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill6.png">
                        <span>¥59</span>
                        <span>¥99</span>
                    </a>
                    <a class="seckill-list">
                        <img src="./img/seckill/seckill7.png">
                        <span>¥9.9</span>
                        <span>¥30</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 生活区 -->
        <div class="floor">
            <div class="floor-body">
                <a>
                    <img src="./img/floor-item/floor1.png">
                    <span class="floor-box">抢199减100</span>
                    <span>京东大药房</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body1.png">
                    <span class="floor-box">爆款149减10</span>
                    <span>京东超市</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body2.png">
                    <span class="floor-box">满299减100</span>
                    <span>京东汽车</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body3.png">
                    <span class="floor-box">每满200减30</span>
                    <span>奢享生活</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body4.png">
                    <span class="floor-box">满139打9折</span>
                    <span>美酒生活季</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body5.png">
                    <span class="floor-box">抢199减100</span>
                    <span>京东大药房</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body6.png">
                    <span class="floor-box">每满300减30</span>
                    <span>服饰嗨购节</span>
                </a>
                <a>
                    <img src="./img/floor-item/floor-body7.png">
                    <span class="floor-box">每满300减30</span>
                    <span>服饰嗨购节</span>
                </a>
            </div>
        </div>
        <div class="floors">
            <div class="floors-top">
                <div class="floors-left">
                    <a href="#">无谓时光</a>
                    <a  href="#">明星时尚</a>
                    <div class="floors-img">
                        <img src="./img/floors/floors1.png">
                        <img src="./img/floors/floors2.png">
                    </div>
                </div>
                <div class="floors-left">
                    <a  href="#">家庭种植</a>
                    <a  href="#">足不出户种青菜</a>
                    <div class="floors-img">
                        <img src="./img/floors/floors3.png">
                        <img src="./img/floors/floors4.png">
                    </div>
                </div>
            </div>
            <div class="floors-bottom">
                <div class="floors-right">
                    <div class="floors-child">
                        <a  href="#">潮流男靴</a>
                        <a  href="#">时尚男靴</a>
                        <img src="./img/floors/floors5.png">
                    </div>
                    <div class="floors-child">
                        <a  href="#">完美纪念</a>
                        <a  href="#">时尚男靴</a>
                        <img src="./img/floors/floors6.png">
                    </div>
                </div>
                <div class="floors-right">
                    <div class="floors-child">
                        <a  href="#">牛仔裤女</a>
                        <a href="#">小个子女装</a>
                        <img src="./img/floors/floors7.png">
                    </div>
                    <div class="floors-child">
                        <a href="#">情调西餐</a>
                        <a href="#">西餐牛排</a>
                        <img src="./img/floors/floors8.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <div class="list-body">
                <div class="list-item"></div>
                <div class="list-item"></div>
            </div>
        </div>
        <div class="bottom">
            <img src="./img/jc-tom/jd-btm1.png">
            <img src="./img/jc-tom/jb-btm2.png">
            <img src="./img/jc-tom/jb-btm3.png">
            <img src="./img/jc-tom/jb-btm4.png">
            <img src="./img/jc-tom/ jb-btm5.png">
        </div>
    </div>
    <script>
        let headBg = document.querySelector('.head-bg');
        let headSlide = document.querySelector('.head-slide');
        let topLeft = document.querySelector('.top-left');
        console.log(headSlide.scrollHeight)
        console.log(window.scrollHeight);
        window.addEventListener('scroll',function(){
            if(window.pageYOffset >= headSlide.scrollHeight){
            $('.head-bg').addClass('fixed');
         }else{
            $('.head-bg').removeClass('fixed');
         }
        });
        $('.top-left').click(function(){
            $(this).parent().remove()
        })
    </script>
</body>
</html>